<template>
  <div class="home">
    <div class="header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <h1>数据统计</h1>
      <div class="tag-group">
        <el-tag
          v-for="item in items1"
          :key="item.label"
          :type="item.type"
          effect="dark"
        >
          {{ item.label }}{{ item.count }}
        </el-tag>
      </div>
      <div class="tag-group">
        <el-tag
          v-for="item in items2"
          :key="item.label"
          :type="item.type"
          effect="dark"
        >
          {{ item.label }}{{ item.count }}
        </el-tag>
      </div>
    </div>
    <div
      id="charts"
      style="width: 800px; height: 400px"
    ></div>
  </div>
</template>
<script>
import { getusersarr, getadminarr, getorderformarr, getallusers, getalladmin, getallorderform } from '@/api/home';

import moment from 'moment';
export default {
  data() {
    return {
      chartinfo: {},
      dateArr: [
        moment(Date.now()).subtract('days', 6).format('YYYY-MM-DD'),
        moment(Date.now()).subtract('days', 5).format('YYYY-MM-DD'),
        moment(Date.now()).subtract('days', 4).format('YYYY-MM-DD'),
        moment(Date.now()).subtract('days', 3).format('YYYY-MM-DD'),
        moment(Date.now()).subtract('days', 2).format('YYYY-MM-DD'),
        moment(Date.now()).subtract('days', 1).format('YYYY-MM-DD'),
        moment(Date.now()).format('YYYY-MM-DD'),
      ],
      usersArr: [],
      administratorArr: [],
      orderformArr: [],
      allusers: 0,
      allministrator: 0,
      allorderform: 0,

      option: {
        title: {
          text: '走势图',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dateArr,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 个',
          },
        },
        series: [
          {
            name: '新增用户',
            type: 'line',
            // data: this.usersArr,
            data: [3, 9, 6, 5, 1, 9, 6],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }],
            },
          },
          {
            name: '新增管理员',
            type: 'line',
            // data: this.administratorArr,
            data: [66, 44, 23, 11, 53, 38, 46],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }],
            },
          },
          {
            name: '新增订单',
            type: 'line',
            // data: this.administratorArr,
            data: [56, 20, 39, 24, 44, 88, 11],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }],
            },
          },
        ],
      },
    };
  },

  watch: {
    option: {
      handler(newVal) {
        let myChart = this.$echarts.init(document.querySelector('#charts'));
        myChart.setOption(newVal);
      },
      deep: true,
    },
    usersArr: {
      immediate: true,
      handler(newval) {
        this.option.series[0].data = newval;
      },
    },
    administratorArr: {
      immediate: true,
      handler(newval) {
        this.option.series[1].data = newval;
      },
    },
    orderformArr: {
      immediate: true,
      handler(newval) {
        this.option.series[2].data = newval;
      },
    },
  },

  computed: {
    items1: function () {
      return [
        { type: 'danger', label: '当日数据' },
        { type: 'info', label: '新增用户:', count: this.usersArr[6] },
        { type: 'info', label: '新增订单:', count: this.orderformArr[6] },
        { type: 'info', label: '新增管理员:', count: this.administratorArr[6] },
      ];
    },
    items2: function () {
      return [
        { type: 'success', label: '总数据' },
        { type: 'info', label: '用户总数:', count: this.allusers },
        { type: 'info', label: '订单总数:', count: this.allministrator },
        { type: 'info', label: '管理员总数:', count: this.allministrator },
      ];
    },
  },
  methods: {
    async getusersarr() {
      for (let i = 0; i < 7; i++) {
        const res = await getusersarr(this.dateArr[i]);
        this.usersArr.push(res.data.count);
      }
      console.log(this.usersArr);
    },
    async getadminarr() {
      for (let i = 0; i < 7; i++) {
        const res = await getadminarr(this.dateArr[i]);
        this.administratorArr.push(res.data.count);
      }
      console.log(this.administratorArr);
    },

    async getorderformarr() {
      for (let i = 0; i < 7; i++) {
        const res = await getorderformarr(this.dateArr[i]);
        this.orderformArr.push(res.data.count);
      }
      console.log(this.orderformArr);
    },

    async getallusers() {
      const res = await getallusers();
      this.allusers = res.data.count;
      console.log(this.allusers);
    },

    async getalladmin() {
      const res = await getalladmin();
      this.allministrator = res.data.count;
      console.log(this.allministrator);
    },

    async getallorderform() {
      const res = await getallorderform();
      this.allorderform = res.data.count;
      console.log(this.allorderform);
    },
  },

  mounted() {
    let myChart = this.$echarts.init(document.querySelector('#charts'));
    myChart.setOption(this.option);
  },

  created() {
    this.getusersarr();
    this.getadminarr();
    this.getorderformarr();
    this.getallusers();
    this.getalladmin();
    this.getallorderform();
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  .header {
    height: 50px;
    width: 100%;
    background-color: #ccc;
    overflow: hidden;
    .el-breadcrumb {
      margin-top: 15px;
      padding-left: 10px;
    }
  }
  #charts {
    margin-top: 50px;
  }
  .content {
    h1 {
      font-size: 24px;
      text-align: center;
    }
    .tag-group {
      margin: 20px;
    }
    .el-tag {
      margin-right: 10px;
      font-size: 16px;
    }
  }
}
</style>
